<!-- eslint-disable vue/valid-v-slot -->
<script setup>
import { ElForm, ElInput, ElRow, ElCol, ElFormItem, ElMessageBox } from 'element-plus'
import { nextTick, onMounted, reactive, ref, toRaw } from 'vue'
import { pageConfig } from '@/views/baseInfo/user/title/config'

const emit = defineEmits(['openViewForm', 'openEditForm'])
const props = defineProps({
  listApi: {
    type: Function
  },
  statusApi: {
    type: Function
  },
  tableColumn: {
    type: Array
  },
  tableConfig: {
    type: Object
  }
})
const queryFormRef = ref()
const formInline = reactive({
  status: '0'
})
const tableData = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val) => {
  pageSize.value = val
  getData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getData()
}
onMounted(() => {
  nextTick(() => {
    getData()
  })
})

const openViewForm = (row) => {
  emit('openViewForm', row)
}
const openEditForm = (row) => {
  emit('openEditForm', row)
}

const updateStatus = (id, status) => {
  console.log(props.statusApi)
  ElMessageBox.confirm('此操作可能会影响到医生开方，请谨慎操作', '警告提示', {
    confirmButtonText: '继续执行',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      props
        .statusApi({
          id: id,
          status: status === 1 ? 2 : 1
        })
        .then(() => {
          getData()
        })
    })
    .catch(() => {})
}

const resetForm = (formEl) => {
  if (!formEl) return
  console.log(formEl)
  formEl.resetFields()
  getData()
}

const resetFormParent = () => {
  resetForm(queryFormRef.value)
}

const screenClick = () => {
  console.log('submit!', toRaw(formInline))
  getData()
}

const getData = async () => {
  console.log(formInline)
  const options = {
    ...formInline
  }
  options.current_page = currentPage.value
  options.per_page = pageSize.value
  if (options.status === '0') {
    options.status = undefined
  }
  const result = await props.listApi({
    ...options
  })
  tableData.value = result.data.data
  total.value = result.data.total_number
}

defineExpose({
  resetFormParent,
  formInline
})
</script>

<template>
  <el-form :inline="true" :model="formInline" class="formALL" ref="queryFormRef">
    <el-form-item
      v-for="(s, sk) in tableColumn.filter((item) => item.isSearch)"
      :key="sk"
      :prop="s.prop"
    >
      <el-input
        v-if="s.formType === 'input'"
        style="width: 180px"
        v-model="formInline[s.prop]"
        :placeholder="s.label"
        clearable
      />
      <el-select
        v-if="['select', 'radio'].includes(s.formType)"
        v-model="formInline[s.prop]"
        style="width: 180px"
      >
        <el-option
          v-for="(sel, selKey) in Object.keys(s.enum)"
          :key="selKey"
          :label="s.enum[sel]"
          :value="sel"
        />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="screenClick">筛选</el-button>
      <el-button @click="resetForm(queryFormRef)">重置</el-button>
      <slot name="addBtn"></slot>
    </el-form-item>
  </el-form>

  <!-- <el-table :data="tableData">
    <el-table-column
      v-for="(t, tk) in tableColumn.filter((item) => item.isTable)"
      :key="tk"
      :prop="t.prop"
      :label="t.label"
    >
      <template #default="scope">
        <span v-if="t.enum && scope.row[t.prop] !== undefined">
          {{ t.enum[scope.row[t.prop]] }}</span
        >
        <span v-else-if="t.asyncSelData && scope.row[t.prop] !== undefined">
          {{
            t.asyncSelData.find((i) => i.id === scope.row[t.prop])?.name ||
            t.asyncSelData.find((i) => i.id === scope.row[t.prop])?.value
          }}
        </span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="160">
      <template #default="scope">
        <el-button
          v-if="tableConfig.buttons.includes('view') && scope.row.status === 1"
          link
          type="primary"
          @click="openViewForm(scope.row)"
          >查看</el-button
        >
        <el-button
          v-if="tableConfig.buttons.includes('edit') && scope.row.status === 2"
          link
          type="primary"
          @click="openEditForm(scope.row)"
          >编辑</el-button
        >
        <el-button
          v-if="tableConfig.buttons.includes('status') && scope.row.status === 1"
          link
          type="primary"
          @click="updateStatus(scope.row.id, scope.row.status)"
          >停用</el-button
        >
        <el-button
          v-if="tableConfig.buttons.includes('status') && scope.row.status === 2"
          link
          type="primary"
          @click="updateStatus(scope.row.id, scope.row.status)"
          >启用</el-button
        >
      </template>
    </el-table-column>
  </el-table> -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :small="pageConfig.small"
      :disabled="pageConfig.disabled"
      :background="pageConfig.background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="less">
::v-deep(.el-table) {
  color: #515a6e;
  font-weight: 400;
  font-size: 14px !important;
}

::v-deep(thead tr th .cell) {
  color: #515a6e;
  font-weight: 500;
}

::v-deep(thead tr th) {
  background: #fafafa !important;
}

::v-deep(tbody tr td) {
  font-size: 13px !important;
}

.el-form-item {
  margin-right: 12px;
}

.custom-card {
  width: 100%;
}

.buttonAll {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.el-card {
  box-shadow: none;
}

.table-container {
  overflow-x: auto;
}

.upload-demo {
  display: flex;

  > * {
    position: relative;
    flex: 1;
    padding: 5px 20px;
    margin: 10px;
    background-color: white;
  }
}

.demo-pagination-block {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
